<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: "Vue2MapboxMapTemplate",
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      this.map = new mapboxgl.Map({
        container: "map", 
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z",
        center: [118.79013542048335, 32.05775855185749], 
        zoom: 3, 
        projection: "mercator",
      });

      // click事件
      this.map.on("click", (evt) => {
        console.log(evt.lngLat);
      });

      this.map.on("zoomend", (e)=>{
        const zoom = this.map.getZoom();
        // const bbox = this.map.getBounds().getSouthWest();
        const bbox = this.map.getBounds().toArray();
        console.log(zoom, bbox.flat());
      })

      // load事件
      this.map.on("load", () => {
        this.map.addSource("earthquakes", {
          type: "geojson",
          // Use a URL for the value for the `data` property.
          data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
        });

        this.map.addLayer({
          id: "earthquakes-layer",
          type: "circle",
          source: "earthquakes",
          paint: {
            "circle-radius": 4,
            "circle-stroke-width": 2,
            "circle-color": "red",
            "circle-stroke-color": "white",
          },
        });

        // setInterval(()=>{
        //   var features = this.map.querySourceFeatures('earthquakes', { sourceLayer: 'earthquakes-layer' });
        //   console.log(features);
        // }, 1000)

        // styledata事件
        // this.map.on("styledata", function () {
        //   // 获取数据源的名称
        //   var sourceName = "earthquakes"; // 替换为你的数据源名称

        //   // 等待数据源加载完毕
        //   var checkSourceLoaded = setInterval(function () {
        //     if (this.map.isSourceLoaded(sourceName)) {
        //       clearInterval(checkSourceLoaded);

        //       // 数据源加载完毕后执行操作
        //       var features = this.map.querySourceFeatures(sourceName);
        //       console.log(features);
        //       console.log(features[0].properties, features[0].geometry);
        //     }
        //   }, 1000);
        // });

        //
      });

      // 监听鼠标移动事件
      this.map.on("mousemove", "earthquakes-layer",  (e) => {
        // 获取悬停位置的图层
        var features = this.map.queryRenderedFeatures(e.point);

        // 如果有图层被悬停
        if (features.length > 0) {
          this.map.getCanvas().style.cursor = "pointer"; // 将鼠标图标更改为指针
        } else {
          this.map.getCanvas().style.cursor = ""; // 恢复默认的鼠标图标
        }
      });

      // 监听地图移动事件
      this.map.on("move", function () {
        // 处理地图移动事件的逻辑
        console.log("Map is moving");
      });
      this.map.on("moveend", function () {
        // 处理地图移动事件的逻辑
        console.log("Map is movingend");
      });

      // 监听地图拖拽事件
      this.map.on("drag", function () {
        // 处理地图拖拽事件的逻辑
        console.log("Map is being dragged");
      });



      // // 创建 Evented 对象, 自定义事件对象
      // var myEvented = new mapboxgl.Evented();

      // map.on('click', "earthquakes-layer", (e)=>{
      //   // console.log(e);
      //   // 获取悬停位置的图层
      //   var features = map.queryRenderedFeatures(e.point);

      //   // 如果有图层被悬停
      //   if (features.length > 0) {
      //     // 触发自定义事件
      //     myEvented.fire('stationID', { myParameter: 'Hello, World!',features,stationID: features[0].layer.id});
      //   } else {
      //     // map.getCanvas().style.cursor = ""; // 恢复默认的鼠标图标
      //   }
        
      // })

      // // 添加事件监听器
      // myEvented.on('stationID', function(e) {
      //     console.log('自定义事件被触发了，参数为：', e, e.myParameter);
      // });


      // click 事件的注册和注销
      // this.map.on('click', "earthquakes-layer", this.clickListemer)

      // setTimeout(()=>{
      //   this.map.off('click', "earthquakes-layer", this.clickListemer)
      // }, 8000)
      
    },
    // clickListemer(e){
    //   const features = this.map.queryRenderedFeatures(e.point, {layers: ["earthquakes-layer"]});
    //   console.log(features, 'eeeeeeeeeeeeee');
    // }
  },
};
</script>

<style></style>
